<template>
  <div class="box">
    <!-- 消息 互动 新职位 -->
    <div class="contbox" v-for="(v,i) in zhi1" :key="i" @click="fun(i)">
      <p>
        <span>{{v.title}}</span>
        <span>{{v.money}}</span>
      </p>
      <p>
        <span>{{v.info.dizhi}}</span>
        <span>{{v.info.timer}}</span>
        <span>{{v.info.study}}</span>
      </p>
      <div class="info">
        <div class="lable">
          <p>
            <img :src="v.info.imgurl" alt="">
            <span>{{v.info.people}}</span>
          </p>
          <span>new</span>
        </div>
        <p>
          <span>职位新发布</span>
          <van-icon name="cross" />
        </p>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      arrid:0
    }
  },
  computed:{
    zhi1(){
      return this.$store.state.zhi1
    }
  },
   methods:{
    // fun(index){
    //   this.arrid = this.$store.state.zhi1[index].id
    //   this.$router.push({ path: '/zhi',query:{ id: this.arrid, i: index }})
    // }
  }
};
</script>

<style scoped>
.box {
  background: #f0f0f0;
  margin-top: 1.40rem;
}
.contbox {
  background: white;
  height: 2rem;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0.08rem;
}
.contbox > p {
  display: flex;
  align-items: center;
  margin: 0.10rem 0;
}
.contbox > p:nth-child(1) {
  justify-content: space-between;
  margin: 0.16rem 0;
}
.contbox > p:nth-child(1) > span:nth-child(1) {
  margin-left: 0.2rem;
}
.contbox > p:nth-child(1) > span:nth-child(2) {
  margin-right: 0.2rem;
  color: #39c0ba;
}

.contbox > p:nth-child(2) {
  justify-content: space-between;
  font-size: 0.14rem;
  margin: 0.10rem 0;
}
.contbox > p:nth-child(2) > span {
  margin: 0 0.05rem;
}
.contbox > p:nth-child(2) > span:nth-child(1) {
  margin-left: 0.2rem;
}
.contbox > p:nth-child(2) > span:nth-child(2) {
  margin-right: 0.2rem;
  color: #999;
}

.contbox > p:nth-child(3) {
  justify-content: flex-start;
}
.contbox > p:nth-child(3) > span {
  background: #f2efef;
  padding: 0.04rem;
  color: #666;
  font-size: 0.12rem;
  margin-right: 0.06rem;
  text-align: center;
  border-radius: 0.04rem;
}
.contbox > p:nth-child(3) > span:nth-child(1) {
  margin-left: 0.2rem;
}

.contbox > .info > .lable {
  display: flex;
  font-size: 0.12rem;
  line-height: 0.30rem;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.20rem;
  border-bottom: 0.01rem solid #ede6e6;
}
.contbox > .info > .lable > p > img {
  width: 0.30rem;
  height: 0.30rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.10rem;
}
.contbox > .info > .lable > p {
  margin-bottom: 0.1rem;
}
.contbox > .info > .lable > p:nth-child(2) {
  border-top: 0.1rem solid #e9e0e0;
}
.contbox > .info > .lable > span {
  color: #fff;
  background: red;
  width: 0.40rem;
  height: 0.20rem;
  line-height: 0.20rem;
  text-align: center;
  border-radius: 0.10rem;
}
.contbox > .info > p:nth-child(2) {
  color: #999;
  display: flex;
  justify-content: space-between;
  margin: 0.10rem 0.20rem;
  font-size: 0.13rem;
}
.contbox > .info > p:nth-child(2) > i {
  font-size: 0.20rem;
}
</style>